<template>
  <div class="orderDetail">
    <ContentWrap>
      <List :column="4" sep="：" label-width="100">
        <ListItem label="零售门店" :value="orderInfo.storeName" />
        <ListItem label="家居顾问" :value="orderInfo.staffName" />
        <ListItem label="零售订单号" :value="orderInfo.saleOrderCode" />
        <ListItem label="联保卡号" :value="orderInfo.unitCart" />
        <ListItem label="零售标识" dict-type-code="TOP_ORDER_TYPE" :value="orderInfo.orderType" />
        <ListItem label="顾客姓名" :value="orderInfo.customerName" />
        <ListItem label="联系电话" :value="orderInfo.contactNumber" />
        <ListItem label="备用联系电话">--</ListItem>
        <ListItem label="零售日期" :value="orderInfo.formmakerTime" />
        <ListItem label="订单状态" dict-type-code="TOP_ORDER_STATUS" :value="orderInfo.status" />
        <ListItem label="最近修改时间" :value="orderInfo.lastModifiedTime" />
        <ListItem label="收货人姓名" :value="orderInfo.consigneeName" />
        <ListItem label="收货人电话" :value="orderInfo.consigneePhone" />
        <ListItem label="备用收货电话">--</ListItem>
        <ListItem label="送货方式" dict-type-code="LOGISTICSMODE" :value="orderInfo.deliveryType" />
        <ListItem label="预计配送日期" :value="orderInfo.fristAppointmentTime" />
        <ListItem label="送装日期" :value="orderInfo.arrangeAppointmentTime" />
        <ListItem label="送装费用" :value="orderInfo.deliveryAmount" />
        <ListItem label="送货地址" :span="24" :value="orderInfo.deliveryAddress" />
        <ListItem label="备注" :span="24" :value="orderInfo.comments" />
      </List>
    </ContentWrap>
  </div>
</template>

<script>
import ContentWrap from '@/components/ContentWrap'
import { List, ListItem } from '@/components/List'
export default {
  name: 'OrderDetail',
  components: {
    ContentWrap,
    List,
    ListItem
  },
  props: {
    orderInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      data: []
    }
  },
  created() {
    // console.log('orderDetail')
  }
}
</script>

<style lang="scss" scoped>
.orderDetail .content-wrap {
  padding: 10px 20px;
}
.orderDetail .content-wrap /deep/ .el-row .el-col {
  line-height: 32px;
}
.orderDetail .content-wrap /deep/ .el-row .custom-list-item {
  margin-bottom: 0;
}
.orderDetail .content-wrap /deep/ .el-row .custom-list-item .label-style {
  text-align-last: right;
}
.orderDetail .content-wrap /deep/ .el-row .custom-list-item span:first-child {
  width: auto;
  font-size: 12px;
  text-align: right;
}
.orderDetail .content-wrap /deep/ .el-row .custom-list-item span:last-child {
  font-size: 12px;
}
</style>
